
.tien-radio,.tien-checkbox,.tien-switch {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-top: 3px;
    margin-bottom: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.tien-radio>.icon,.tien-checkbox>.icon,.tien-switch>.icon {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%);
    border: 1px solid transparent;
    transition: all .2s ease-in-out
}

.tien-radio>.icon:after,.tien-checkbox>.icon:after,.tien-switch>.icon:after {
    position: absolute;
    content: " ";
    transition: all .2s ease-in-out;
    display: block
}

.tien-radio>.text,.tien-checkbox>.text,.tien-switch>.text {
    line-height: 1.3;
    margin-left: 4px;
    position: relative;
    display: inline-block
}

.tien-radio>input,.tien-checkbox>input,.tien-switch>input {
    position: absolute;
    z-index: -1;
    opacity: 0;
    display: none
}

.tien-radio>input ~ .icon,.tien-radio>input ~ .text,.tien-checkbox>input ~ .icon,.tien-checkbox>input ~ .text,.tien-switch>input ~ .icon,.tien-switch>input ~ .text {
    cursor: pointer
}

.tien-radio {
    padding-left: 18px;
    margin-right: 10px
}

.tien-radio>.icon {
    width: 18px;
    height: 18px;
    border-color: #ddd;
    border-radius: 50%
}

.tien-radio>.icon:after {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    border-radius: 50%
}

.tien-radio>input[type="radio"]:checked ~ .icon {
    border-color: #0081ff
}

.tien-radio>input[type="radio"]:checked ~ .icon:after {
    background-color: #0081ff
}

.tien-radio>input[type="radio"]:disabled ~ .icon,.tien-radio>input[type="radio"]:disabled ~ .text,.tien-radio>input[type="radio"].disabled ~ .icon,.tien-radio>input[type="radio"].disabled ~ .text {
    cursor: not-allowed;
    opacity: .5
}

.tien-radio.tick>.icon:after,.tien-radio.tick-o>.icon:after {
    width: 10px;
    height: 6px;
    top: calc(50% - 4px);
    left: calc(50% - 5px);
    -webkit-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    transform: rotate(-50deg);
    border-radius: 0;
    border: 2px solid transparent;
    background-color: transparent
}

.tien-radio.tick>input[type="radio"]:checked ~ .icon {
    background-color: #0081ff
}

.tien-radio.tick>input[type="radio"]:checked ~ .icon:after {
    border-left-color: #fff;
    border-bottom-color: #fff;
    background-color: transparent
}

.tien-radio.tick-o>input[type="radio"]:checked ~ .icon:after {
    border-left-color: #0081ff;
    border-bottom-color: #0081ff;
    background-color: transparent
}

.tien-radio.large {
    padding-left: 30px;
    margin-top: 8px;
    margin-bottom: 8px
}

.tien-radio.large>.icon {
    width: 30px;
    height: 30px
}

.tien-radio.large>.icon:after {
    width: 18px;
    height: 18px;
    top: calc(50% - 9px);
    left: calc(50% - 9px)
}

.tien-radio.large.tick>.icon:after,.tien-radio.large.tick-o>.icon:after {
    width: 18px;
    height: 10px;
    top: calc(50% - 7px);
    left: calc(50% - 9px);
    border-width: 3px
}

.tien-radio.large>.text {
    line-height: 1.3;
    margin-left: 6px;
    font-size: 1rem
}

.tien-radio.blue>.icon,.tien-radio.tick.blue>.icon,.tien-radio.tick-o.blue>.icon {
    border-color: #0081ff
}

.tien-radio.blue>input[type="radio"]:checked ~ .icon:after,.tien-radio.tick.blue>input[type="radio"]:checked ~ .icon {
    background-color: #0081ff
}

.tien-radio.tick.blue>input[type="radio"]:checked ~ .icon:after {
    border-left-color: #fff;
    border-bottom-color: #fff;
    background-color: transparent
}

.tien-radio.tick-o.blue>input[type="radio"]:checked ~ .icon:after {
    border-left-color: #0081ff;
    border-bottom-color: #0081ff;
    background-color: transparent
}

.tien-radio.blue>.icon,.tien-radio.blue>input[type="radio"]:checked ~ .icon,.tien-radio.tick.blue>.icon,.tien-radio.tick-o.blue>.icon {
    border-color: #07e
}

.tien-radio.blue>input[type="radio"]:checked ~ .icon:after,.tien-radio.tick.blue>input[type="radio"]:checked ~ .icon {
    background-color: #07e
}

.tien-radio.tick.blue>input[type="radio"]:checked ~ .icon:after {
    border-left-color: #fff;
    border-bottom-color: #fff;
    background-color: transparent
}

.tien-radio.tick-o.blue>input[type="radio"]:checked ~ .icon:after {
    border-left-color: #07e;
    border-bottom-color: #07e;
    background-color: transparent
}

.tien-radio.green>.icon,.tien-radio.green>input[type="radio"]:checked ~ .icon,.tien-radio.tick.green>.icon,.tien-radio.tick-o.green>.icon {
    border-color: #39b54a
}

.tien-radio.green>input[type="radio"]:checked ~ .icon:after,.tien-radio.tick.green>input[type="radio"]:checked ~ .icon {
    background-color: #39b54a
}

.tien-radio.tick.green>input[type="radio"]:checked ~ .icon:after {
    border-left-color: #fff;
    border-bottom-color: #fff;
    background-color: transparent
}

.tien-radio.tick-o.green>input[type="radio"]:checked ~ .icon:after {
    border-left-color: #39b54a;
    border-bottom-color: #39b54a;
    background-color: transparent
}

.tien-radio.yellow>.icon,.tien-radio.yellow>input[type="radio"]:checked ~ .icon,.tien-radio.tick.yellow>.icon,.tien-radio.tick-o.yellow>.icon {
    border-color: #fbbd08
}

.tien-radio.yellow>input[type="radio"]:checked ~ .icon:after,.tien-radio.tick.yellow>input[type="radio"]:checked ~ .icon {
    background-color: #fbbd08
}

.tien-radio.tick.yellow>input[type="radio"]:checked ~ .icon:after {
    border-left-color: #fff;
    border-bottom-color: #fff;
    background-color: transparent
}

.tien-radio.tick-o.yellow>input[type="radio"]:checked ~ .icon:after {
    border-left-color: #fbbd08;
    border-bottom-color: #fbbd08;
    background-color: transparent
}

.tien-radio.red>.icon,.tien-radio.red>input[type="radio"]:checked ~ .icon,.tien-radio.tick.red>.icon,.tien-radio.tick-o.red>.icon {
    border-color: #e54d42
}

.tien-radio.red>input[type="radio"]:checked ~ .icon:after,.tien-radio.tick.red>input[type="radio"]:checked ~ .icon {
    background-color: #e54d42
}

.tien-radio.tick.red>input[type="radio"]:checked ~ .icon:after {
    border-left-color: #fff;
    border-bottom-color: #fff;
    background-color: transparent
}

.tien-radio.tick-o.red>input[type="radio"]:checked ~ .icon:after {
    border-left-color: #e54d42;
    border-bottom-color: #e54d42;
    background-color: transparent
}

.tien-radio.purple>.icon,.tien-radio.purple>input[type="radio"]:checked ~ .icon,.tien-radio.tick.purple>.icon,.tien-radio.tick-o.purple>.icon {
    border-color: #6739b6
}

.tien-radio.purple>input[type="radio"]:checked ~ .icon:after,.tien-radio.tick.purple>input[type="radio"]:checked ~ .icon {
    background-color: #6739b6
}

.tien-radio.tick.purple>input[type="radio"]:checked ~ .icon:after {
    border-left-color: #fff;
    border-bottom-color: #fff;
    background-color: transparent
}

.tien-radio.tick-o.purple>input[type="radio"]:checked ~ .icon:after {
    border-left-color: #6739b6;
    border-bottom-color: #6739b6;
    background-color: transparent
}

.tien-radio.mauve>.icon,.tien-radio.mauve>input[type="radio"]:checked ~ .icon,.tien-radio.tick.mauve>.icon,.tien-radio.tick-o.mauve>.icon {
    border-color: #9c26b0
}

.tien-radio.mauve>input[type="radio"]:checked ~ .icon:after,.tien-radio.tick.mauve>input[type="radio"]:checked ~ .icon {
    background-color: #9c26b0
}

.tien-radio.tick.mauve>input[type="radio"]:checked ~ .icon:after {
    border-left-color: #fff;
    border-bottom-color: #fff;
    background-color: transparent
}

.tien-radio.tick-o.mauve>input[type="radio"]:checked ~ .icon:after {
    border-left-color: #9c26b0;
    border-bottom-color: #9c26b0;
    background-color: transparent
}

.tien-radio.black>.icon,.tien-radio.black>input[type="radio"]:checked ~ .icon,.tien-radio.tick.black>.icon,.tien-radio.tick-o.black>.icon {
    border-color: #333
}

.tien-radio.black>input[type="radio"]:checked ~ .icon:after,.tien-radio.tick.black>input[type="radio"]:checked ~ .icon {
    background-color: #333
}

.tien-radio.tick.black>input[type="radio"]:checked ~ .icon:after {
    border-left-color: #fff;
    border-bottom-color: #fff;
    background-color: transparent
}

.tien-radio.tick-o.black>input[type="radio"]:checked ~ .icon:after {
    border-left-color: #333;
    border-bottom-color: #333;
    background-color: transparent
}

.tien-radio.grey>.icon,.tien-radio.grey>input[type="radio"]:checked ~ .icon,.tien-radio.tick.grey>.icon,.tien-radio.tick-o.grey>.icon {
    border-color: #bbb
}

.tien-radio.grey>input[type="radio"]:checked ~ .icon:after,.tien-radio.tick.grey>input[type="radio"]:checked ~ .icon {
    background-color: #8799a3
}

.tien-radio.tick.grey>input[type="radio"]:checked ~ .icon {
    border-color: #8799a3
}

.tien-radio.tick.grey>input[type="radio"]:checked ~ .icon:after {
    border-left-color: #fff;
    border-bottom-color: #fff;
    background-color: transparent
}

.tien-radio.tick-o.grey>input[type="radio"]:checked ~ .icon:after {
    border-left-color: #8799a3;
    border-bottom-color: #8799a3;
    background-color: transparent
}

.tien-radio.white>.icon,.tien-radio.white>input[type="radio"]:checked ~ .icon,.tien-radio.tick.white>.icon,.tien-radio.tick-o.white>.icon {
    border-color: #fff
}

.tien-radio.white>input[type="radio"]:checked ~ .icon:after,.tien-radio.tick.white>input[type="radio"]:checked ~ .icon {
    background-color: #fff
}

.tien-radio.tick.white>input[type="radio"]:checked ~ .icon {
    border-color: #fff
}

.tien-radio.tick.white>input[type="radio"]:checked ~ .icon:after {
    border-left-color: rgba(0,0,0,.7);
    border-bottom-color: rgba(0,0,0,.7);
    background-color: transparent
}

.tien-radio.white>.text {
    color: #fff
}

.tien-checkbox {
    padding-left: 18px;
    margin-right: 10px
}

.tien-checkbox>.icon {
    width: 18px;
    height: 18px;
    border-color: #ddd
}

.tien-checkbox>input[type="checkbox"]:checked ~ .icon {
    border-color: #0081ff
}

.tien-checkbox>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: #0081ff;
    border-bottom-color: #0081ff
}

.tien-checkbox>input[type="checkbox"]:disabled ~ .icon,.tien-checkbox>input[type="checkbox"]:disabled ~ .text,.tien-checkbox>input[type="checkbox"].disabled ~ .icon,.tien-checkbox>input[type="checkbox"].disabled ~ .text {
    cursor: not-allowed;
    opacity: .5
}

.tien-checkbox>.icon:after {
    width: 12px;
    height: 8px;
    top: calc(50% - 6px);
    left: calc(50% - 6px);
    -webkit-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    transform: rotate(-50deg);
    border: 2px solid transparent;
    background-color: transparent
}

.tien-checkbox.bedye>input[type="checkbox"]:checked ~ .icon {
    border-color: #0081ff;
    background-color: #0081ff
}

.tien-checkbox.bedye>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: #fff;
    border-bottom-color: #fff;
    background-color: transparent
}

.tien-checkbox.square>.icon:after {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    border: 0;
    background-color: transparent
}

.tien-checkbox.square>input[type="checkbox"]:checked ~ .icon {
    border-color: #0081ff
}

.tien-checkbox.square>input[type="checkbox"]:checked ~ .icon:after {
    background-color: #0081ff
}

.tien-checkbox.large {
    padding-left: 30px;
    margin-top: 8px;
    margin-bottom: 8px
}

.tien-checkbox.large>.icon {
    width: 30px;
    height: 30px
}

.tien-checkbox.large>.icon:after {
    width: 18px;
    height: 10px;
    top: calc(50% - 7px);
    left: calc(50% - 9px);
    border-width: 3px
}

.tien-checkbox.large>.text {
    line-height: 1.3;
    margin-left: 6px;
    font-size: 1rem
}

.tien-checkbox.large.square>.icon:after {
    width: 18px;
    height: 18px;
    top: calc(50% - 9px);
    left: calc(50% - 9px)
}

.tien-checkbox.blue>.icon {
    border-color: #0081ff
}

.tien-checkbox.blue>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: #0081ff;
    border-bottom-color: #0081ff
}

.tien-checkbox.bedye.blue>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.square.blue>input[type="checkbox"]:checked ~ .icon:after {
    background-color: #0081ff
}

.tien-checkbox.bedye.blue>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: #fff;
    border-bottom-color: #fff
}

.tien-checkbox.blue>.icon,.tien-checkbox.blue>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.bedye.blue>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.square.blue>input[type="checkbox"]:checked ~ .icon {
    border-color: #07e
}

.tien-checkbox.blue>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: #07e;
    border-bottom-color: #07e
}

.tien-checkbox.bedye.blue>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.square.blue>input[type="checkbox"]:checked ~ .icon:after {
    background-color: #07e
}

.tien-checkbox.bedye.blue>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: #fff;
    border-bottom-color: #fff
}

.tien-checkbox.green>.icon,.tien-checkbox.green>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.bedye.green>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.square.green>input[type="checkbox"]:checked ~ .icon {
    border-color: #39b54a
}

.tien-checkbox.green>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: #39b54a;
    border-bottom-color: #39b54a
}

.tien-checkbox.bedye.green>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.square.green>input[type="checkbox"]:checked ~ .icon:after {
    background-color: #39b54a
}

.tien-checkbox.bedye.green>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: #fff;
    border-bottom-color: #fff
}

.tien-checkbox.yellow>.icon,.tien-checkbox.yellow>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.bedye.yellow>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.square.yellow>input[type="checkbox"]:checked ~ .icon {
    border-color: #fbbd08
}

.tien-checkbox.yellow>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: #fbbd08;
    border-bottom-color: #fbbd08
}

.tien-checkbox.bedye.yellow>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.square.yellow>input[type="checkbox"]:checked ~ .icon:after {
    background-color: #fbbd08
}

.tien-checkbox.bedye.yellow>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: #fff;
    border-bottom-color: #fff
}

.tien-checkbox.red>.icon,.tien-checkbox.red>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.bedye.red>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.square.red>input[type="checkbox"]:checked ~ .icon {
    border-color: #e54d42
}

.tien-checkbox.red>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: #e54d42;
    border-bottom-color: #e54d42
}

.tien-checkbox.bedye.red>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.square.red>input[type="checkbox"]:checked ~ .icon:after {
    background-color: #e54d42
}

.tien-checkbox.bedye.red>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: #fff;
    border-bottom-color: #fff
}

.tien-checkbox.purple>.icon,.tien-checkbox.purple>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.bedye.purple>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.square.purple>input[type="checkbox"]:checked ~ .icon {
    border-color: #6739b6
}

.tien-checkbox.purple>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: #6739b6;
    border-bottom-color: #6739b6
}

.tien-checkbox.bedye.purple>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.square.purple>input[type="checkbox"]:checked ~ .icon:after {
    background-color: #6739b6
}

.tien-checkbox.bedye.purple>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: #fff;
    border-bottom-color: #fff
}

.tien-checkbox.mauve>.icon,.tien-checkbox.mauve>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.bedye.mauve>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.square.mauve>input[type="checkbox"]:checked ~ .icon {
    border-color: #9c26b0
}

.tien-checkbox.mauve>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: #9c26b0;
    border-bottom-color: #9c26b0
}

.tien-checkbox.bedye.mauve>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.square.mauve>input[type="checkbox"]:checked ~ .icon:after {
    background-color: #9c26b0
}

.tien-checkbox.bedye.mauve>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: #fff;
    border-bottom-color: #fff
}

.tien-checkbox.black>.icon,.tien-checkbox.black>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.bedye.black>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.square.black>input[type="checkbox"]:checked ~ .icon {
    border-color: #333
}

.tien-checkbox.black>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: #333;
    border-bottom-color: #333
}

.tien-checkbox.bedye.black>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.square.black>input[type="checkbox"]:checked ~ .icon:after {
    background-color: #333
}

.tien-checkbox.bedye.black>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: #fff;
    border-bottom-color: #fff
}

.tien-checkbox.grey>.icon,.tien-checkbox.grey>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.bedye.grey>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.square.grey>input[type="checkbox"]:checked ~ .icon {
    border-color: #bbb
}

.tien-checkbox.grey>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: #8799a3;
    border-bottom-color: #8799a3
}

.tien-checkbox.bedye.grey>input[type="checkbox"]:checked ~ .icon {
    border-color: #8799a3
}

.tien-checkbox.bedye.grey>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.square.grey>input[type="checkbox"]:checked ~ .icon:after {
    background-color: #8799a3
}

.tien-checkbox.bedye.grey>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: #fff;
    border-bottom-color: #fff
}

.tien-checkbox.white>.icon,.tien-checkbox.white>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.bedye.white>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.square.white>input[type="checkbox"]:checked ~ .icon {
    border-color: #fff
}

.tien-checkbox.white>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: #fff;
    border-bottom-color: #fff
}

.tien-checkbox.bedye.white>input[type="checkbox"]:checked ~ .icon {
    border-color: #fff
}

.tien-checkbox.bedye.white>input[type="checkbox"]:checked ~ .icon,.tien-checkbox.square.white>input[type="checkbox"]:checked ~ .icon:after {
    background-color: #fff
}

.tien-checkbox.bedye.white>input[type="checkbox"]:checked ~ .icon:after {
    border-left-color: rgba(0,0,0,.7);
    border-bottom-color: rgba(0,0,0,.7)
}

.tien-checkbox.white>.text {
    color: #fff
}
